Day 16 - 切版進階技巧(二) : RWD、版型規劃

每日一談

嗨，大家好 ! 我是阿蘇
今天是Day16 ，今天分享的是RWD、版型規劃，目前大部分的網站都是響應式網站(RWD)，所以除了一般切版外我們也需要考慮到RWD及手機板、PC版頁面區塊變化，RWD也是切版必學技巧之一，那我們今天來談談 RWD 跟 切版實作時如何規劃考慮版型，讓我們看下去

RWD 基礎觀念

RWD 全名是 Responsive Web Design，意思是 響應式網頁設計，讓網頁可以在任何尺寸下，呈現適當的比例

範例 - RWD 網站不同尺寸呈現

• 運用斷點 去寫對應 CSS 樣式
• 不同尺寸的資訊顯示

RWD 切版實作技巧

一、 斷點設計
二、 基礎RWD
二、 從大到小 Max-width - PC 網頁為主
三、 從小到大 Min-width - Mobile first 手機為主
四、 事先規劃版型、 一塊一塊區塊切版

一、斷點設計

常用斷點

• 992px
• 768px
• 576px

我們一般寫斷點會設計2~4個斷點，在縮放時視網站情況使用，我在我的side project，所採用的則是三個斷點 576px 、768px 、992px ，視情況細節可能會運用bs的斷點微調

二、基礎 RWD

常見寫法有兩種，一種是從大寫到小（以PC為主)，一種是從小寫到大 (Mobile first)

• max-width - pc > ipad > mobile (在...尺寸之下)
• min-width - mobile > ipad > pc (在...之上)

所以我們要先決定基礎樣式， 初學者可以先用max-width 來練習，等熟悉兩者原理就可以靈活變化，所以這邊我們使用 max-width ，那基礎樣式就是 pc 版的Css，下面可以看到範例我寫了一個p標籤字體大小設定16px，然後寫了max-width斷點 992px，那他在992px下就會變化為12px

所以寫的時候我們要先設立斷點，然後選擇 max-width 或 min-width 來寫，然後依照不同尺寸裡面包不同樣式去做css版型變化

三、從大到小 Max-width - PC 網頁為主

四、從小到大 Min-width - Mobile first 手機為主

四、事先規劃版型、 一塊一塊區塊切版

• Rwd技巧之一 - 事先規劃版型
  先想好在不同尺寸下要如何呈現，不同排版方式寫法也會有落差，要考慮不同尺寸下的寫法，避免寫完 web版要去延伸手機版才發現寫法衝突，然後修改調整更花大量時間

• Rwd技巧之二 - 一塊一塊區塊切版
  寫 RWD 是非常需要實作練習，需要有良好地佈局觀、CSS知識點，你才會清楚如何去以基礎樣式去延伸在不同尺寸調整變化 情況， 所以剛開始實作我們一定光是在不同斷點就會卡很久，所以千萬不要做完整頁再去做 RWD ，以區塊為單位去切會比較理想

以區塊為單位，寫好一塊 RWD 在切下一區塊

rwd規劃、版型規劃就分享到這邊，rwd 是非常需要實作練習的，理解rwd的概念也非常重要，大家試著多多練習吧!